<script lang="ts" setup>
import LineArtists from '@/components/common/LineArtists.vue'

import { computed, ref, watch, nextTick } from 'vue'
import { useSongStoreHook } from '@/store/modules/song'
import { parseLyric, sliceNull } from '@/utils/format'
const songStore = useSongStoreHook()
const lyricScroll = ref()

const lyricOpen = computed({
  get() {
    return songStore.lyricOpen
  },
  set(val: boolean) {
    songStore.lyricOpen = val
  }
})

const state = computed(() => songStore.status)

const currentSongDetail = computed(() => {
  return songStore.currentSongDetail
})

const lyric = computed(() => {
  if (!songStore.currentLyric.lrc?.lyric) return ''
  return sliceNull(parseLyric(songStore.currentLyric.lrc?.lyric))
})

// 处理歌词进度滚动
const currentTime = computed(() => songStore.currentTime)
const currentIndex = ref(0)

watch(
  () => currentTime.value,
  () => {
    // 减少js执行
    if (!lyricOpen.value) return
    lyricProgressUpdate()
  }
)

watch(
  () => lyricOpen.value,
  (newValue) => {
    nextTick(() => {
      if (newValue) {
        if (newValue) {
          lyricProgressUpdate()
          lyricScroll.value.scrollTop = (currentIndex.value - 1) * 36
        }
      }
    })
  }
)

watch(
  () => currentIndex.value,
  (newValue) => {
    let number = 0
    let timer = setInterval(() => {
      number++
      lyricScroll.value.scrollTop = (newValue - 1) * 36 + number
      if (number === 36) clearInterval(timer)
    }, 6)
  }
)
// 歌词播放更新当前歌词高亮
const lyricProgressUpdate = () => {
  if (currentIndex.value !== lyric.value.length - 1) {
    for (let j = currentIndex.value; j < lyric.value.length - 1; j++) {
      if (currentIndex.value === lyric.value.length - 2) {
        if (currentTime.value + 1 > lyric.value[lyric.value.length - 1][0]) {
          currentIndex.value = lyric.value.length - 1
          return
        }
      } else {
        if (
          currentTime.value + 1 >= lyric.value[j][0] &&
          currentTime.value + 1 < lyric.value[j + 1][0]
        ) {
          currentIndex.value = j
          return
        }
      }
    }
  }
}
</script>

<template>
  <transition name="slide">
    <div v-if="lyricOpen" class="lyric_container">
      <div class="lyric_content">
        <div class="lyric_content__container">
          <div class="lyric_content__box">
            <div class="lyric_needle__circle" />
            <img
              class="lyric_needle"
              :class="{ lyric_needle_isplay: !state }"
              src="../../assets/img/needle.png"
              alt=""
            />
            <div class="lyric_disc">
              <img src="../../assets/img/disc.png" alt="" />
              <img
                class="lyric_song"
                :src="currentSongDetail.al?.picUrl"
                alt=""
              />
            </div>
          </div>
          <div class="lyric_content__box">
            <div class="lyric_songInfo">
              <div class="lyric_songName">{{ currentSongDetail.name }}</div>
              <div class="lyric_song__detail">
                <span class="ellipsis"
                  >歌手：<LineArtists :artists="currentSongDetail.ar" />
                </span>
                <span class="ellipsis"
                  >专辑：{{ currentSongDetail.al?.name }}
                  <i v-if="currentSongDetail.al?.tns.length > 0"
                    >({{ currentSongDetail.al?.tns[0] }})</i
                  >
                </span>
              </div>
              <div class="lyric_song__detail">
                {{ currentSongDetail.tns && currentSongDetail.tns[0] }}
              </div>
            </div>

            <div class="lyric_scroll" ref="lyricScroll">
              <div v-for="item in 4" class="lyric_item" :key="item" />
              <div
                :class="{ currentTime: currentIndex === index }"
                class="lyric_item"
                v-for="(item, index) in lyric"
                :key="index + 4"
              >
                {{ item[1] }}
              </div>
              <div
                v-for="item in ['1', '2', '3', '4']"
                class="lyric_item"
                :key="item"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.lyric_container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background: var(--music-main-color);
  .lyric_content {
    width: 1024px;
    margin: 0px auto;
    padding: 40px 0 20px;
    &__container {
      display: flex;
    }
    &__box {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .lyric_needle {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: rotate(-40deg);
      transform-origin: 5px 5px;
      width: 20%;
      z-index: 99;
      transition: all 0.3s linear;
    }
    .lyric_needle__circle {
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-20%);
      width: 22px;
      height: 22px;
      background-color: #c4c4c4;
      border: 6px solid #dbdbdb;
      box-shadow: 0 0 5px 4px rgba(99, 99, 99, 0.3);
      border-radius: 50%;
      z-index: 999;
    }

    .lyric_needle_isplay {
      transform: rotate(0);
    }

    .lyric_disc {
      margin: 90px auto;
      width: 324px;
      position: relative;
      animation: circle 20s 0.5s linear infinite;
    }
    .lyric_song {
      position: absolute;
      width: 65%;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    // 歌词部分样式
    .lyric_scroll {
      width: 100%;
      height: 324px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      transition: all 0.2s linear;
    }

    .lyric_songInfo {
      height: 110px;
      overflow: hidden;
    }
    .lyric_songName {
      font-size: 28px;
      color: var(--music-link-color);
    }
    .lyric_song__detail {
      line-height: 2;
      color: var(--music-color-8);
      display: flex;
      & > span {
        flex: 1;
      }
    }

    .artist:hover {
      cursor: pointer;
      color: var(--music-text-link-hover-color);
    }
    .lyric_item {
      width: 100%;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: var(--music-color-8);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .currentTime {
      font-size: 18px;
      color: var(--music-text-link-color);
    }
  }
}
.slide-enter-active {
  animation: slideUp 0.4s;
}
.slide-leave-active {
  animation: slideDown 0.4s;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes circle {
  0% {
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
